<template>
    <div class="count-views">
        <div class="card">
            <div class="card__header">
                <span class="label">总访问量</span>
                <span class="value">{{count.totalVisits}}</span>
            </div>

            <div class="card__container">
                <v-chart :option="chartOption" autoresize />
            </div>

            <div class="card__footer">
                <span class="label">昨日访问量</span>
                <span class="value">{{count.yesterday_visits}}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import { useCool } from '/@/cool';

import moment from 'moment';
const { service, router } = useCool();
const count = ref({
	totalVisits: 0,
	yesterday_visits: 0,
	total_visits_chart: {}
});
const chartOption = reactive({
	grid: {
		left: 0,
		top: 1,
		right: 0,
		bottom: 1
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		axisLine: {
			show: false
		},
		data: [] as string[]
	},
	yAxis: {
		type: 'value',
		splitLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		},
		axisLabel: {
			show: false
		}
	},
	series: [
		{
			type: 'line',
			smooth: true,
			showSymbol: false,
			symbol: 'circle',
			symbolSize: 6,
			data: new Array(12)
				.fill(1)
				.map(() => parseInt((Math.random() * 1000).toFixed(0)) + 500),
			areaStyle: {
				color: new echarts.graphic.LinearGradient(
					0,
					0,
					0,
					1,
					[
						{
							offset: 0,
							color: '#D1E5FF'
						},
						{
							offset: 1,
							color: '#FFFFFF'
						}
					],
					false
				)
			},
			itemStyle: {
				color: '#4165d7'
			},
			lineStyle: {
				width: 2
			}
		}
	]
});
onMounted(() => {
	service.user.analysis.getTotalVisits({}).then(res => {
		count.value = res;
		let max = Math.max(...res.total_visits_chart.datas);
		if (max < 10) {
			max = 10;
		}
		// 数据
		chartOption.series[0].data = res.total_visits_chart.datas;
		// 日期
		chartOption.xAxis.data = res.total_visits_chart.dates.map((e: string) => {
			e = moment(e).format('yyyy-MM-DD');
			const [_, b, c] = e.split('-');
			return `${b}-${c}`;
		});
	});
});
</script>

<style lang="scss" scoped>
.count-views {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}

		&__footer {
			border-top: 0;
		}
	}
}
</style>
